<template>
  <div class="box">
    <!-- 用户总人数，男女比例， 柱状图 -->
    <!-- 高手秘籍分类  --- 饼状图 -->
    <!-- 近十日的发布的博客数量  --- 折线图 -->
      <div class="user">
        <div class="total" id="total"></div>
        <div class="kind" id="kind"></div>
      </div>
      <div class="right">
        <div class="secrets" id="secrets"></div>
        <div class="blogs" id="blogs"></div>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {TotalUser,ProvinceUser} from '@/request/api'
export default {
  name: 'charts',
  data(){
    return{
      list:[],
      boy:null,
      girl:null,
      chartData:[]
    }
  },
  methods:{
    total(){
      
      var totalChart = document.getElementById('total')
      var total = echarts.init(totalChart)
      var option = {
        title: {
          text: '当前注册人数统计'
        },
        xAxis: {
          type: 'category',
          data: ['总人数', '男', '女']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [this.list[0], this.list[1], this.list[2]],
            type: 'bar'
          }
        ]
      };
      total.setOption(option)
    },
    kind(){
      var chartDom = document.getElementById('kind');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '男女比例',
          subtext: '人数比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.boy, name: '男' },
              { value: this.girl, name: '女' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);

    },
    secrets(){
      var chartDom = document.getElementById('secrets');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '用户地区分布',
          subtext: '精确到省份',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data:this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  async mounted(){
    // 发请求
    let res = await TotalUser()
    this.list = res.data.data
    this.boy = this.list[1]
    this.girl = this.list[2]
    // 省份信息的获取
    let res2 = await ProvinceUser()
    this.chartData = res2.data.data
    this.total()
    this.kind()
    this.secrets()
  }
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 610px;
    border: 1px solid  rgb(241, 235, 235);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 5px;
    overflow: hidden;
}
.user{
  flex: 5;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}
.total{
  flex: 1;
}
.kind{
  flex:1;
}
.right{
  flex: 5;
  border: 1px solid  rgb(241, 235, 235);
  display: flex;
  flex-direction: column;
}
.secrets{
  flex: 1;
  border: 1px solid  rgb(241, 235, 235);
}
/* .blogs{
  flex: 1;
  border: 1px solid skyblue;
} */

</style>
